<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <link rel="stylesheet" href="../assets/css/MusicApp.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

  <title>Music App </title>
</head>

<body>

  <div class="container  text-center mt-5">
    <h1 class="fs-1" style="color: white;">Music App </h1>

    <div class="d-flex p-4 bd-highlight justify-content-center">
      <div class="card mt-1 mb-1">
        <div class="card-body Music-card">
          <h5 class="card-title fs-2" id="Title">TiTle</h5>
          <p class="card-text" id="Artist"></p>
          <div class="text-center Music-app-img ImageRoation" id="Music-img"> </div>
          <div class="audio" id="Audio-control">
            <div id="PlayMusic">
              <audio src="../assets/sounds/bubbles.mp3" id="SongStorag"></audio>
            </div>
            <div class="progressbar-container" id="Progressbar-Container">

              <div class="progress_duration_time">
                <div id="current" style="font-size: smaller;" >0:00</div>
                <div id="duration" style="font-size: smaller;">0:31</div>
              </div>
              <div class="progress_div" id="progress_div">
              <div class="progress" id="progress"></div>
            </div>
            </div>

            <div class="audio-icon d-flex justify-content-around">
              <i class="fas fa-backward" id="bakcward"></i>
              <i class="fas fa-play" id="play"></i>
              <i class="fas fa-forward" id="forward"></i>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="Cr" style="font-size: 12px; font-style: italic; color: white;" >
      Developed By
      <a href="https://www.linkedin.com/in/vishal-kumar-6a741b192/" target="_blank" style="text-decoration: none; color: white"> Vishal Kumar</a> </div>
  </div>
  <script src="../assets/js/MusicApp.js"></script>
</body>

</html>